Customizing WordPress Images with a Plugin: ImageFX
My post about how to customize WordPress images with tricks like greyscale and such got me lots of feedback, so I figured I might as well turn it into a plugin.
The ImageFX plugin allows you to customize the image sizes from WordPress or custom ones for your theme, by applying filters to them.
The way it works is basically identical to my original post on the topic, only it allows the filters to be defined on a per-image-size level. It also allows the addition of a “slug” to be appended to the image filename, which is useful for cases where you want to have two images at the same size, but with different filters.
Since it was easy to do, I went ahead and created several other simple image filters that you can use for your images:
- Greyscale (black and white)
- Sepia tone (old-timey!)
- Colorize with red, yellow, green, blue, or purple
- Photonegative
- Emboss
- Brighten
- Greyscale except red, green, or blue (classy!)
Here’s some examples. This a pic of me, Nacin, Rose, and Matt at WordCamp San Francisco. I ran it through the sepia, blue colorize, and grey-except-red filters.
These are some of the default filters included, but since I could, I went ahead and made it easily expandable too. All you have to do to define a filter is to create a function to do the image filtering you want, then call the imagefx_register_filter() function to add it.
To implement your own custom filter, you can do it like this:
imagefx_register_filter('custom-name','my_custom_filter');
function my_custom_filter(&$image) {
// modify the $image here as you see fit
}
Note that the $image is passed by reference, so you don’t have to return it. This is because the $image resource takes up a lot of memory, so to save on memory usage, you are manipulating it in place, sort of thing.
You can use any of the image functions in PHP to change the image however you like. The filters I’ve implemented are mostly pretty simple. You can see them all in the filters.php file, in the plugin.
Caveats: The plugin will only filter JPG images, to avoid the overhead of recompressing PNGs and to avoid breaking animated GIF files. Also note that I haven’t tested these filters extensively. They’re only a starting point, sort of thing. I spent all of about 20 minutes writing them, so don’t expect miracles. 🙂
You can download version 0.1 of the plugin from the WordPress plugin directory: http://wordpress.org/extend/plugins/imagefx/
Enjoy!
You are a lifesaver. This is an awesome plugin. The functionality is implemented in a great way! You released it yesterday, I desperately needed it today. Serendipity!
Hi there,
Sounds great but I must be doing something very stupid cause I canNOT get it to work. 🙁
OK. What I did was this:
1. Installed and activated it. 🙂
2. Went over to the settings and set up: medium > filer, grayscale > slug, _gray > Hard Cropped: false (this canNOT )be changed. 🙂
3. uploaded a new image > imported the medium size into post. 🙂
Result: Nothing. 🙁
Tried it again without “the slug”. Still nothing. Same as it ever was. 🙁
Please enlighten.
Thank you in advance.
Few things:
1. It only works on JPG images. It will not activate on PNGs or GIFs. This is intentional.
2. You don’t need the slug, and shouldn’t put one in unless you’re doing something special.
3. You can’t change the sizes or the cropping. That’s not what the plugin does. Sizes and cropping are part of the image size settings. This is only there for informational purposes.
Thank you for the quick reply Otto,
1. I tried it only on JPG images.
2. I tried it with and w/o the slug.
3. I didn’t try to crop the images. I only wrote what was written there (I didn’t know if I was doing something wrong.)
4. I use it on a multisite 3.2.1 and tried it both by network activating it and site-by-site.
5. I even checked my blog.dir folder (by ftp, on the server) to see if there were any additional files there (I don’t know; desperate move).
6. Should I write some code someplace?
You have my email. Please feel free to email me so I can give you the site name and a test account. I would really appreciate it. Help me not feeling daft.
Thank you for your time.
I haven’t tested it on multisite. No idea if it’ll work there.
Hmmm…
So I could be less daft than I thought. Thank you.
Any plans of looking into it? I mean you have created a unique plugin. Since WordPress v3 the main thing is multisites (at least for me). Making your plugin compatible with multisites means that every single blog/site there gets the benefit.
Please look into it.
Thanks again
PS: My offer still stands. Email me for a free test use on our multisite.
I ran into a problem with your plugin. When the uploaded image is the same size as one of the images sizes in the media settings (or a custom image size) no “FX” version of that image size will be created.
I have two custom image sizes of 900px x 300px. On one of those I use your plugin’s b/w filter/. I set the slug to be “bw”. When the user uploads an image that is already cropped to 900px x 300px no b/w version of the image is created.
This isn’t a problem with the plugin, it’s just how WP image resizing works. It won’t create an image of the same size in a resize operation, since it already has the full size. So if you set medium to 100×200 then upload an image of that size, then there will not be a “medium” version, because “medium” would have to be a resized version, by definition.
Resized images, and images created by this plugin, must be “resized” versions. Not “unchanged size” versions.
No security break with this sort of plugin?
Good question!
In this case, it’s safe because it’s writing the files in the same way the normal uploader system does. So the ownership will be the same as the normal uploader produces.
File ownership is a tricky thing. For uploads through the web browser, on a non-setuid setup, the files will be owned by the webserver’s user. This is a security problem, but only if the uploads are arbitrary in nature. There’s very little risk as long as the files are limited to those which cannot be executed by the webserver itself. Images and such are simply served statically, and so it’s (generally) okay for them to be owned by the webserver user, although I grant you that it is not an ideal. It’s a convenience trade-off, basically.
In the case of writing files directly from a theme or a plugin which are not limited in this sort of scope, other methods (which I talk about elsewhere) must be used to write these files using the correct ownership, so that security issues are not introduced. But that only really applies for arbitrary file modifications. This plugin is specifically targeting images and only those that have already been uploaded through the normal uploader process. It doesn’t handle arbitrary uploads.
Thanks for your answer, and sorry for the delay 🙂
I had my own version of the code but switched to your plugin since it’s better organized. But I noticed it doesn’t work on older posts… I cannot find any hook, function or reference on why it only creates the grayscale version when you upload an image to a new post.
Any ideas?
Yes, known bug. I didn’t consider the case of adding pics to old posts. That’s something I never do and so didn’t think of. I’ll fix it soon.
Well, I’m working on a new template for a site that has a lot of published posts. I’ll keep looking for a solution and, of course, will post it here if I find it before you do.
Thanks a lot for the plugin and for your time!
[…] Customizing WordPress Images with a Plugin: ImageFX » Otto on WordPress My post about how to customize WordPress images with tricks like greyscale and such got me lots of feedback, so I figured I might as well turn it into a plugin. The ImageFX plugin allows you to customize the image sizes from WordPress or custom ones for your theme, by applying filters to them. […]
Hi Otto, great plugin, One thing though. After I activated it, when i upload pdf files i get errors. I know that this pluggin checks for file extension and works only with JPG images, but it seems that it affects not only images, but other files too. Could you tell me where to add a line testing if uploaded file is an image?
ps. i had some trouble figuring out how to manage slugs in this plugin. Maybe some explanation in readme.txt would make life easier for others?
Would love to add transparent PNG image watermarking to this somehow. Could someone help me achieve this?
Not sure what I’m doing wrong, but I’ve activated the plugin, marked every field as “greyscale”, started a new post and uploaded a new featured image…. still no luck, just shows up normal, with colour.
Any insight is greatly appreciated, looking forward to making this work!
No idea what you’re doing wrong, but I’ve tested version 0.4 of the plugin, and it’s working correctly. New version added rounded corner filters.
A demo of all the various filters in action is on this page:
http://demo.wpsmiththemes.com/minfolio/all-image-styles-example/
cheers, I’ll spend some time with it.
Hi,
Its a great plugin but I am stuck somewhere and I need your help. See this link http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/
I want this functionlity to be implemented usign this plugin. How can I do this?
Thanks
This plugin is great!
Just trying to figure out how I can create a gradient map filter. Your Sepia effect is great, and seems close… the goal is to specify a color for black, and one for white (again, like Photoshop’s Gradient Map effect).
Thanks!
Hi,
i’ve installed your super plugin, anyway how can i recall an image using the slug?
i’ve tried:
the_post_thumbnail(‘medium_neg’) but it don’t find the image and recall the orignal one i’ve uploaded.
thanks!
Hi Otto Having agreat time experimenting with imagefx. Works well but I notice that when i click on an image with rounded corners (to see a larger version) the rounded bit on each corner is white rather than the background colour. Any ideas on what I may have overlooked ??
Thanks Robert
The rounded corners are indeed white, and not transparent. If you want transparent corners, then I recommend using CSS techniques instead, and not rounding the corners directly in the image like this plugin does.
Hey Otto,
Can we hire you to update the plugin to address this issue (ImageFX images not made when uploaded to old posts/pages):
http://stackoverflow.com/questions/13039918/wordpress-imagefx-plugin-not-creating-images-for-old-posts
Thanks,
Drew
Hi there, I installed the plugin because I have a few jpg images on my site that I would like in grayscale. Once installed and activated, I went to the settings, chose full size 1024×1024. I chose this because I chose the option full size when uploading the pictures. However, I think this may be where the issue is.
When I uploaded the images to WordPress, I cropped them in WordPress to be 300 x 225, so they would fit neatly together on the page. When selecting the images to go on the site, I chose ‘full size’, which now said 300 x 225, rather than the original 1024×1024.
Going into the ImageFX settings, there isn’t an option for 300×225, only full size 1024×1024.
Does ImageFX not work on cropped files? Also, is it only applied when uploading new files or can it apply it to images already on the site?
Could it be possible to papply fx on all JPG images of my website ? For the moment I use to filter my images in photoshop !!! It will help me a lot ! Could you help me ? http://test0.gdm-alfrednobel.com/magazine/
Hi there,
Your plugin is very nice and I was wondering if there is any option to bring up colors when the mouse is hovering the thumbnail.
Thanks very much!
M.
Hi,
this is really a great plugin.
I only have a problem with getting the images. because this for example just doesn´t work:
$feat_image_grey = wp_get_attachment_link( get_post_thumbnail_id($post->ID), ‘139grayscale’ );
it always returns the full image instead. Any idea regarding this issue?
Thanks in advance!
This is a very useful plugin. Wondering if this is compatible with the latest version of WordPress(WordPress 3.9.2) Thanks in advance.